<!--
  地图渲染组件 (建议使用mars3d地图的地方都用该组件)
  @copyright 火星科技 mars3d.cn
  @author 木遥 2024-12-03
-->
<template>
  <div :id="withKeyId" class="mars3d-container" ref="container"></div>
  <!-- <div class="panel" style="position: fixed; background: rgba(0, 0, 0, 0.5); top: 300px; left: 1200px; z-index: 99">
    <button @click="createPoint" style="font-size: 36px">添加视角</button>
  </div> -->
  <!-- <div id="11"></div> -->
</template>
<script setup lang="ts">
import * as mars3d from "mars3d"
import "./expand/index" // 引入插件或注册扩展js
import { getDefaultContextMenu } from "@mars/utils/getDefaultContextMenu"
import $api from "@mars/utils/request.js"
import { computed, onUnmounted, onMounted, toRaw, ref, inject } from "vue"
import { $alert, $message } from "@mars/components/mars-ui/index"
import { logInfo } from "@mars/utils/mars-util"
import { useWidget } from "@mars/common/store/widget"
import {
  Close,
  HistoryQuery,
  LandSurveying,
  Layers,
  Ruler,
  Analysis,
  Navigation,
  Mark,
  Bookmark,
  Printer,
  TakeOff,
  HandPaintedPlate,
  SwitchContrast,
  FullScreenPlay,
  Local,
  Tool
} from "@icon-park/svg"
// import sxjPointList from "/img/json/sxjPointList.json"

import {
  ESObjectsManager,
  ESCameraViewCollection,
  ESExcavate,
  ESLocationMeasurement,
  ESPoi2D,
  ESImageLabel,
  ESGeoDiv,
  ESPolygonFence,
  ES3DTileset
} from "earthsdk3"
import { ESUeViewer } from "earthsdk3-ue"
import { clear } from "console"
// import { ESCesiumViewer } from "earthsdk3-cesium"

const objectsManager = new ESObjectsManager(ESUeViewer)

const objmJson = {
  asset: {
    type: "ESObjectsManager",
    version: "0.1.0",
    createdTime: "2022-06-17T05:54:41.744Z",
    modifiedTime: "2025-03-03T09:10:04.971Z",
    name: "图层管理"
  },
  viewers: [
    {
      id: "5fef3db5-f0f4-486c-a05a-2aa93ed5e1e9",
      type: "ESCzmViewer",
      show: true,
      globeShow: true,
      ionAccessToken: "",
      apiKey: "",
      apiUrl: "",
      secretKey: "",
      speechVoiceMode: "",
      hoverTime: 2,
      debug: false,
      lonLatFormat: "DECIMAL_DEGREE",
      fov: 60,
      currentTime: 1740974400000,
      simulationTime: 1740931200000,
      timeSync: false,
      rain: 0,
      snow: 0,
      cloud: 0,
      fog: 0,
      depthOfField: 0,
      atmosphere: true,
      sun: true,
      moon: true,
      flyToBoundingSize: 256,
      editingHeightOffset: 0,
      terrainShader: {
        slope: {
          show: false
        },
        aspect: {
          show: false
        },
        elevationRamp: {
          show: false
        },
        elevationContour: {
          show: false,
          color: [1, 0, 0, 1],
          spacing: 150,
          width: 2
        }
      },
      name: "undefined_ined"
    }
  ],
  sceneTree: {
    root: {
      children: [
        {
          name: "新建场景",
          children: [
            {
              name: "全球影像",
              sceneObj: {
                id: "ae103185-08c7-4ed0-b6d4-15ad77bbbf66",
                type: "ESImageryLayer",
                url: "https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.webp?sku=101sYi3y1mcMa&access_token=pk.eyJ1IjoiMTUyMzE5ODg5MzIiLCJhIjoiY2x6bWgzNWY3MDFrOTJscXd4cHVjYXoxNiJ9.sYA8NW_bR9mTTNpROFoznw",
                rectangle: [-180, -90, 180, 90],
                maximumLevel: 18,
                name: "全球影像",
                allowPicking: true
              },
              children: []
            }
          ]
        }
      ]
    }
  },
  viewCollection: []
  // lastView: {
  //   position: [
  //     105,
  //     30.023157648545492,
  //     18388467.771032583
  //   ],
  //   rotation: [
  //     360,
  //     -89.89742568964756,
  //     0
  //   ]
  // }
}

// objectsManager.createSceneObjectFromJson(objmJson)
objectsManager.json = { ...objmJson }

const { activate, disableAll, isActivate, disable } = useWidget()
const loucengModalRef: any = inject("loucengModalRef")

const poiArr = ref([])

const props = withDefaults(
  defineProps<{
    mapKey?: string // 多个地图时,可传入key区分地图
    url?: string // 传入的地图构造参数url，可为空，只传options
    options?: any // 传入的地图构造参数options，可覆盖url内的参数
  }>(),
  {
    mapKey: "default",
    url: undefined,
    options: undefined
  }
)

// 用于存放地球组件实例
let map: mars3d.Map // 地图对象

// 使用用户传入的 mapKey 拼接生成 withKeyId 作为当前显示容器的id
const withKeyId = computed(() => `mars3d-container-${props.mapKey}`)

// onload事件将在地图渲染后触发
const emit = defineEmits(["onload", "clickPoi"])
let pointLayer
let lcLayer
let pointLayerLou

const initMars3d = async () => {
  // 获取配置
  let mapOptions
  if (props.url) {
    // 存在url时才读取
    mapOptions = await mars3d.Util.fetchJson({ url: props.url })
  }

  if (props.options) {
    // 存在叠加的属性时
    let exOptions
    if (props.options.then) {
      exOptions = toRaw(await props.options)
    } else {
      exOptions = toRaw(props.options)
    }

    if (mapOptions) {
      mapOptions = mars3d.Util.merge(mapOptions, exOptions) // 合并配置
    } else {
      mapOptions = exOptions
    }
  }

  logInfo("地图构造参数", mapOptions)
  console.log("地图构造参数", mapOptions)
  console.log("地图构造参数", withKeyId.value)

  // map = new mars3d.Map(withKeyId.value, mapOptions)
  map = new mars3d.Map("11", mapOptions)

  startAnimation()
  // 针对不同终端的优化配置
  if (mars3d.Util.isPCBroswer()) {
    map.zoomFactor = 2.0 // 鼠标滚轮放大的步长参数

    // IE浏览器优化
    if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
      map.viewer.targetFrameRate = 20 // 限制帧率
      map.scene.requestRenderMode = false // 取消实时渲染
    }
  } else {
    map.zoomFactor = 5.0 // 鼠标滚轮放大的步长参数

    // 移动设备上禁掉以下几个选项，可以相对更加流畅
    map.scene.requestRenderMode = false // 取消实时渲染
    map.scene.fog.enabled = false
    map.scene.skyAtmosphere.show = false
    map.scene.globe.showGroundAtmosphere = false
  }

  // 二三维切换不用动画
  if (map.viewer.sceneModePicker) {
    map.viewer.sceneModePicker.viewModel.duration = 0.0
  }

  // 绑定当前项目的默认右键菜单
  map.bindContextMenu(getContextMenu())

  // webgl渲染失败后，刷新页面
  map.on(mars3d.EventType.renderError, async () => {
    await $alert("程序内存消耗过大，请重启浏览器")
    window.location.reload()
  })

  pointLayer = new mars3d.layer.GraphicLayer({
    name: "PointLayer",
    isAutoEditing: false
  })
  map.addLayer(pointLayer)

  pointLayerLou = new mars3d.layer.GraphicLayer({
    name: "PointLayer",
    isAutoEditing: false
  })
  map.addLayer(pointLayerLou)
  bindLayerPopup()

  lcLayer = new mars3d.layer.GraphicLayer({
    name: "PointLayer",
    isAutoEditing: false
  })
  map.addLayer(lcLayer)

  // map构造完成后的一些处理

  // emit("onload", map)
}

const startAnimation = () => {
  map.flyHome({ duration: 0 })

  // 开场动画
  // map
  //   .openFlyAnimation({
  //     // duration1:4,
  //     // easingFunction1: Cesium.EasingFunction.QUINTIC_IN_OUT,
  //   })
  //   .then(() => {
  //     onMapLoad()
  //     // 动画播放完成后回调
  //   })

  setTimeout(() => {
    onMapLoad()
  }, 1500)
}

const stopAnimation = () => {
  map.camera.cancelFlight()
}

const rotatePoint: any = inject("rotatePoint")

const lou = ["Box009", "Box007", "Box008"]

// 每层楼高度
const floorHeight = ref(0)

// map构造完成后的一些处理，可以按需注释和选用
function onMapLoad() {
  // Mars3D地图内部使用，如右键菜单弹窗
  // @ts-ignore
  window.globalAlert = $alert
  // @ts-ignore
  window.globalMsg = $message

  // 用于 config.json 中 西藏垭口 图层的详情按钮 演示
  // @ts-ignore
  window.showPopupDetails = (item: any) => {
    $alert(item.NAME)
  }

  // 【测试】 用于 config.json中配置的图层，绑定额外方法和参数
  // const tiles3dLayer = map.getLayerById(204012) // 上海市区
  // if (tiles3dLayer) {
  //   tiles3dLayer.options.onSetOpacity = function (opacity: number) {
  //     tiles3dLayer.style = {
  //       color: {
  //         conditions: [
  //           ["${floor} >= 200", "rgba(45, 0, 75," + 0.5 * opacity + ")"],
  //           ["${floor} >= 100", "rgba(170, 162, 204," + opacity + ")"],
  //           ["${floor} >= 50", "rgba(224, 226, 238," + opacity + ")"],
  //           ["${floor} >= 25", "rgba(252, 230, 200," + opacity + ")"],
  //           ["${floor} >= 10", "rgba(248, 176, 87," + opacity + ")"],
  //           ["${floor} >= 5", "rgba(198, 106, 11," + opacity + ")"],
  //           ["true", "rgba(127, 59, 8," + opacity + ")"]
  //         ]
  //       }
  //     }
  //   }
  // }
  // const TdtLayer = new mars3d.layer.GoogleLayer({
  //    layer: "img_d"
  // })
  // map.addLayer(TdtLayer)

  // const tiles3dLayer = new mars3d.layer.TilesetLayer({
  //   url: "/img/mx/0722/tileset.json",
  //   flyTo: false,
  //   position: {
  //     alt: -140
  //   }
  // })
  // map.addLayer(tiles3dLayer)

  // map.flyTo({
  //   position: [105.562497, 30.466196, 368.1],
  //   heading: 359.2,
  //   pitch: -45,
  //   duration: 2
  // })

  // const tiles3dLayer1 = new mars3d.layer.TilesetLayer({
  // //  url: "/img/mx/01/tileset.json",
  //   url: "/img/mx/lxh/tileset.json",
  //   flyTo: true,
  //   position: {
  //     alt: 0
  //   }
  //   // projectTo2D: true,
  //   //  clampToGround: true
  // })
  // console.log("加载模型")
  // map.addLayer(tiles3dLayer1)
  // const tiles3dLayer2 = new mars3d.layer.TilesetLayer({
  // //  url: "/img/mx/01/tileset.json",
  //   url: "/img/mx/klzx/tileset.json",
  //   flyTo: true,
  //   position: {
  //     alt: 0
  //   }
  //   // projectTo2D: true,
  //   //  clampToGround: true
  // })
  // console.log("加载模型")
  // map.addLayer(tiles3dLayer2)

  tiles3dLayer.readyPromise
    .then(() => {
      // const a = { "lat":30.469458, "lng":105.566857, "alt":98.5, "heading":262, "pitch":-5.7 }
      // const point = { lat: 30.465959, lng: 105.562597, alt: 403.6, heading: 359.2, pitch: -45, roll: 0, duration: 3, stop: 0 }
      let point = { lat: 30.448257, lng: 105.563597, alt: 1800.3, heading: 346.3, pitch: -38.1 }
      map.setCameraView(point)
      setTimeout(() => {
        point = { lat: 30.466557, lng: 105.563874, alt: 88, heading: 340, pitch: -6.2 }
        map.setCameraView(point)
        // 获取所有特殊人群
        getLouInfoAll()
      }, 2000)
      rotatePoint.value = new mars3d.thing.RotatePoint({
        direction: false, // 方向 true逆时针，false顺时针
        time: 5, // 给定飞行一周所需时间(单位 秒)，控制速度
        autoStopAngle: 40 // 到达指定角度后自动停止
      })
      map.addThing(rotatePoint.value)
      rotatePoint.value.on(mars3d.EventType.stop, function (event) {
        // initYj()
        // 获取所有特殊人群
        // getLouInfoAll()
      })
      setTimeout(() => {
        // rotatePoint.value.start()
      }, 3000)
    })
    // 绑定监听事件

    .catch((e) => {
      // 加载失败
      console.log("模型加载失败", e)
    })
}

const initYj = () => {
  map.setCameraViewList([
    { lng: 105.568528, lat: 30.446129, alt: 509.2, heading: 355.5, pitch: -22.5, roll: 0, duration: 4, stop: 0 },
    { lng: 105.558795, lat: 30.459639, alt: 509.2, heading: 330, pitch: -22.5, roll: 0, duration: 4, stop: 0 },
    { lng: 105.546921, lat: 30.469789, alt: 510.3, heading: 355, pitch: -22.5, roll: 0, duration: 3, stop: 0 },
    // { lng: 105.543648, lat: 30.473093, alt: 510.3, heading: 155, pitch: -22.5, roll: 0, duration: 3, stop: 0 },
    // { lng: 105.54308, lat: 30.473172, alt: 510.3, heading: 30, pitch: -22.5, roll: 0, duration: 3, stop: 0 },
    { lng: 105.547359, lat: 30.480145, alt: 510.3, heading: 108.5, pitch: -22.5, roll: 0, duration: 5, stop: 0 },
    { lng: 105.563088, lat: 30.483569, alt: 510.5, heading: 180, pitch: -22.5, roll: 0, duration: 5, stop: 0 },
    { lng: 105.572873, lat: 30.47378, alt: 510.5, heading: 200, pitch: -22.5, roll: 0, duration: 5, stop: 0 },
    // { lng: 105.580913, lat: 30.461072, alt: 515.5, heading: 305, pitch: -25.5, roll: 0, duration: 3 },
    { lng: 105.566201, lat: 30.436493, alt: 2500, heading: 355.5, pitch: -35, roll: 0, duration: 1, stop: 0 }
    // { lat: 30.465959, lng: 105.562597, alt: 403.6, heading: 359.2, pitch: -45, roll: 0, duration: 1, stop: 0 }
  ])
}

function getContextMenu() {
  const contextmenu: any = getDefaultContextMenu(map)

  const children = []
  const iconStyle: any = { theme: "outline", fill: "#fff", size: "18" }
  const widgetList = [
    { name: "底图切换", icon: LandSurveying(iconStyle), widget: "manage-basemap" },
    { name: "图层管理", icon: Layers(iconStyle), widget: "manage-layers" },
    // { name: "图上量算", icon: Ruler(iconStyle), widget: "measure" },
    // { name: "空间分析", icon: Analysis(iconStyle), widget: "analysis" },
    { name: "坐标定位", icon: Local(iconStyle), widget: "location-point" },
    // { name: "地区导航", icon: Navigation(iconStyle), widget: "location-region" },
    // { name: "我的标记", icon: Mark(iconStyle), widget: "addmarker" },
    // { name: "视角书签", icon: Bookmark(iconStyle), widget: "bookmark" },
    // { name: "地图打印", icon: Printer(iconStyle), widget: "print" },
    // { name: "飞行漫游", icon: TakeOff(iconStyle), widget: "roamLine-list" },
    // { name: "图上标绘", icon: HandPaintedPlate(iconStyle), widget: "plot" },
    // { name: "卷帘对比", icon: SwitchContrast(iconStyle), widget: "map-split" },
    // { name: "分屏对比", icon: FullScreenPlay(iconStyle), widget: "map-compare" },
    { name: "兴趣点查询", icon: HistoryQuery(iconStyle), widget: "query-poi" }
  ]
  widgetList.forEach((item) => {
    children.push({
      name: item.name,
      widget: item.widget,
      text: function () {
        if (isActivate(this.widget)) {
          return "关闭" + this.name
        } else {
          return this.name
        }
      },
      icon: item.icon,
      callback: function (e) {
        if (isActivate(this.widget)) {
          disable(this.widget)
        } else {
          activate(this.widget)
        }
      }
    })
  })
  children.push({
    text: "关闭所有",
    icon: Close(iconStyle),
    callback: function (e) {
      disableAll()
    }
  })

  // contextmenu.push()
  contextmenu.splice(2, 0, {
    text: "常用工具",
    icon: Tool(iconStyle),
    children
  })

  return contextmenu
}

const pointList = ref([])
const setPoint = () => {
  const pointArr = [
    { grid: '{"type":"Point","coordinates":[105.555236,30.506926, 75.5]}', name: "企业名称", type: "qiye", remark: "xx区" },
    { grid: '{"type":"Point","coordinates":[105.586853,30.505541, 75.5]}', name: "商家名称", type: "shangjia", remark: "xx区" }
  ]

  pointArr.forEach((pointData: any) => {
    // 解析点位的坐标
    const coordinates = JSON.parse(pointData.grid).coordinates
    let iconClass = ""
    if (pointData.type === "qiye") {
      iconClass = "qyPoint1"
    } else if (pointData.type === "shangjia") {
      iconClass = "sjPoint1"
    }
    // 创建 Mars3D 中的点对象(默认点位样式)
    const pointGraphic = new mars3d.graphic.DivGraphic({
      position: coordinates,
      frameRate: 1,
      attr: {
        type: "企业"
      },
      show: true,
      style: {
        clampToGround: true,
        distanceDisplayCondition: true,
        distanceDisplayCondition_far: 400000,
        distanceDisplayCondition_near: 0,
        horizontalOrigin: 1,
        html: `<div class="${iconClass}" >
              <div class="${iconClass}_box">${pointData.name}</div>
          </div>`,
        verticalOrigin: 0
      }
    })
    // pointList.value.push(pointGraphic)
    pointGraphic.on(mars3d.EventType.click, function (event: any) {
      emit("clickPoi", event)
    })
    // 将点对象添加到图层
    pointLayer.addGraphic(pointGraphic)
    // alert("设置poi")
  })
}

const setWgyPoi = (pointData) => {
  // 解析点位的坐标
  const coordinates = [parseFloat(pointData.lng), parseFloat(pointData.lat), 10]
  const iconClass = "wgyPoint1"

  // const sceneObject = objectsManager.createSceneObject(ESGeoDiv)
  // sceneObject.position = coordinates
  // sceneObject.allowPicking = true
  // sceneObject.innerHTML = `
  //   <div class="poibox">
  //     <img src="${pointData.wgy_list[0].image}" alt="" class="${iconClass}">
  //     <div class="${iconClass}_box">
  //       <div style="font-size:9px">${pointData.name}</div>
  //       <div style="font-size:12px">${pointData.wgy_list[0].name}</div>
  //       <div style="font-size:9px">${pointData.wgy_list[0].telphone || "暂无电话"}</div>
  //     </div>
  //   </div>
  //     `
  // sceneObject.renderInUE = true
  const sceneObject = objectsManager.createSceneObject(ESPoi2D)
  sceneObject.position = coordinates
  sceneObject.mode = "Custom"
  sceneObject.style = {
    image: pointData.wgy_list[0].image,
    imageSize: [50, 55],
    text: pointData.name + " | " + pointData.wgy_list[0].name + " | " + pointData.wgy_list[0].telphone || "暂无电话",
    textOffset: [
      // 文字偏移
      20, 0
    ],
    textBackground: "https://www.earthsdk.com/example3/thumbnail/you.png",
    textBoxOffset: [
      // 文字背景偏移
      20, 0
    ],
    textBoxAlign: "start", // 文字背景对齐
    useDefault: true, // 是否使用默认样式
    textBoxMode: "default" // 文字背景模式
  }
  sceneObject.allowPicking = true
  const attr = {
    type: "wgpq",
    data: pointData
  }
  sceneObject.widgetEvent.don((e) => {
    if (e.type === "leftClick") {
      emit("clickPoi", attr)
    }
  })
  poiArr.value.push(sceneObject)

  // 创建 Mars3D 中的点对象(默认点位样式)
  // const pointGraphic = new mars3d.graphic.DivGraphic({
  //   position: coordinates,
  //   frameRate: 1,
  //   attr: {
  //     type: "wgpq",
  //     data: pointData
  //   },
  //   show: true,
  //   style: {
  //     clampToGround: true,
  //     distanceDisplayCondition: true,
  //     distanceDisplayCondition_far: 400000,
  //     distanceDisplayCondition_near: 0,
  //     horizontalOrigin: 1,
  //     html: `<div class="${iconClass}" style="background-image: url(${pointData.wgy_list[0].image})">
  //             <div class="${iconClass}_box">
  //               <div style="font-size:9px">${pointData.name}</div>
  //               <div style="font-size:12px">${pointData.wgy_list[0].name}</div>
  //               <div style="font-size:9px">${pointData.wgy_list[0].telphone || "暂无电话"}</div>
  //             </div>
  //         </div>`,
  //     verticalOrigin: 0
  //   }
  // })
  // pointGraphic.on(mars3d.EventType.click, function (event: any) {
  //   console.log("点击了点位", event)
  //   emit("clickPoi", event)
  // })
  // // 将点对象添加到图层
  // pointLayer.addGraphic(pointGraphic)
}

const setqyPoint = () => {
  const pointArr = [
    { grid: '{"type":"Point","coordinates":[105.555236,30.506926, 75.5]}', name: "企业名称", type: "qiye", remark: "xx区" },
    { grid: '{"type":"Point","coordinates":[105.586853,30.505541, 75.5]}', name: "企业名称", type: "qiye", remark: "xx区" }
  ]

  pointArr.forEach((pointData: any) => {
    // 解析点位的坐标
    const coordinates = JSON.parse(pointData.grid).coordinates
    let iconClass = ""
    if (pointData.type === "qiye") {
      iconClass = "qyPoint1"
    }
    // 创建 Mars3D 中的点对象(默认点位样式)
    const pointGraphic = new mars3d.graphic.DivGraphic({
      position: coordinates,
      frameRate: 1,
      attr: {
        type: "qiye"
      },
      show: true,
      style: {
        clampToGround: true,
        distanceDisplayCondition: true,
        distanceDisplayCondition_far: 400000,
        distanceDisplayCondition_near: 0,
        horizontalOrigin: 1,
        html: `<div class="${iconClass}" >
              <div class="${iconClass}_box">${pointData.name}</div>
          </div>`,
        verticalOrigin: 0
      }
    })
    // pointList.value.push(pointGraphic)
    pointGraphic.on(mars3d.EventType.click, function (event: any) {
      emit("clickPoi", event)
    })
    // 将点对象添加到图层
    pointLayer.addGraphic(pointGraphic)
    // alert("设置poi")
  })
}

const setXldPoint = async () => {
  removeAll()
  const res = await $api.get("api/V1/getAqyj")
  if (res.code === 1) {
    const pointArr = res.data
    pointArr.forEach((pointData: any) => {
      // 解析点位的坐标
      const points = JSON.parse(pointData.fanwei)
      const coordinates = points[0]
      const sceneObject = objectsManager.createSceneObject(ESPoi2D)
      sceneObject.position = coordinates
      // 设置显示文本名称
      sceneObject.name = pointData.name
      sceneObject.mode = "CircularV01"
      // sceneObject.url = `/img/myimg/point/xunluodianPoint.png`
      sceneObject.allowPicking = true
      // sceneObject.renderInUE = true
      // sceneObject.innerHTML = `
      //   <div class="poibox">
      //     <div class="xldPoint1"></div>
      //     <div class="xldPoint1_box">${pointData.name}</div>
      //   </div>
      // `
      const attr = {
        type: "巡逻点"
      }
      sceneObject.widgetEvent.don((e) => {
        if (e.type === "leftClick") {
          emit("clickPoi", attr)
        }
      })

      poiArr.value.push(sceneObject)
      // let iconClass = ""
      // iconClass = "xldPoint1"
      // // 创建 Mars3D 中的点对象(默认点位样式)
      // const pointGraphic = new mars3d.graphic.DivGraphic({
      //   position: coordinates,
      //   frameRate: 1,
      //   attr: {
      //     type: "巡逻点"
      //   },
      //   show: true,
      //   style: {
      //     clampToGround: true,
      //     distanceDisplayCondition: true,
      //     distanceDisplayCondition_far: 400000,
      //     distanceDisplayCondition_near: 0,
      //     horizontalOrigin: 1,
      //     html: `<div class="${iconClass}" >
      //           <div class="${iconClass}_box">${pointData.name}</div>
      //       </div>`,
      //     verticalOrigin: 0
      //   }
      // })
      // pointList.value.push(pointGraphic)
      // pointGraphic.on(mars3d.EventType.click, function (event: any) {
      //   console.log("点击了点位", event)
      //   emit("clickPoi", event)
      // })
      // // 将点对象添加到图层
      // pointLayer.addGraphic(pointGraphic)
      // alert("设置poi")
    })
  }
}

const setgwjfPoint = (data) => {
  removeAll()
  const pointArr = data
  console.log(data)

  pointArr.forEach((pointData: any) => {
    // 解析点位的坐标
    const coordinates = [105.56258, 30.46867, 0]
    const iconClass = "wzcbdPoint1"
    const sceneObject = objectsManager.createSceneObject(ESGeoDiv)
    sceneObject.position = coordinates
    sceneObject.innerHTML = `
        <div class="poibox">
          <div class="${iconClass}"></div>
          <div class="${iconClass}_box">
            <div class="${iconClass}_box_name">${pointData.community_name}</div>
            <div class="${iconClass}_box_fzr">${pointData.community_address}</div>
          </div>
        </div>
      `
    pointData.type = "gwjf"
    sceneObject.allowPicking = true
    sceneObject.renderInUE = true
    sceneObject.pickedEvent.don((e) => {
      console.log("点击了点位", e)
      emit("clickPoi", pointData)
    })
    poiArr.value.push(sceneObject)
  })
}

const setWzcbdPoint = async () => {
  removeAll()
  const res = await $api.get("api/V1/getWzcb")
  if (res.code === 1) {
    const pointArr = res.data
    pointArr.forEach((pointData: any) => {
      // 解析点位的坐标
      const coordinates = [parseFloat(pointData.lng), parseFloat(pointData.lat), 0]
      const iconClass = "wzcbdPoint1"

      const sceneObject = objectsManager.createSceneObject(ESGeoDiv)
      sceneObject.position = coordinates
      sceneObject.innerHTML = `
        <div class="poibox">
          <div class="${iconClass}"></div>
          <div class="${iconClass}_box">
            <div class="${iconClass}_box_name">${pointData.name}</div>
            <div class="${iconClass}_box_fzr">${pointData.fzr} ${pointData.phone}</div>
            <div class="${iconClass}_box_fzr">${pointData.address}</div>
          </div>
        </div>
      `
      sceneObject.anchor = [0, 0.8]
      sceneObject.renderInUE = true

      poiArr.value.push(sceneObject)
    })
  }
}

const setsxtPoint = async () => {
  objectsManager.activeViewer.flyIn([105.5730605316598, 30.445682770433987, 4480.540608561356], [330.5, -54, -1], 2)
  removeAll()
  let sxjPointList = null
  const res = await $api.get("api/index/get_jiankong_list")
  if (res.code === 1) {
    sxjPointList = res.data
    console.log("摄像头数据", sxjPointList)
    sxjPointList.forEach((pointData: any) => {
      // 解析点位的坐标
      if (pointData.lng && pointData.lat) {
        const coordinates = [parseFloat(pointData.lng), parseFloat(pointData.lat), parseFloat(pointData.high) || 0]
        const device_no = pointData.device_no
        // const sceneObject = objectsManager.createSceneObject(ESImageLabel)
        const sceneObject = objectsManager.createSceneObject(ESPoi2D)
        sceneObject.position = coordinates
        const text = pointData.type_text
        // sceneObject.name = pointData.name
        // sceneObject.mode = "SquareH01"
        let sxt_type = ""
        let iconClass = ""
        if (text.indexOf("人脸") > -1) {
          sxt_type = "sxt_rl"
          iconClass = "sxtPoint2"
        } else if (text.indexOf("水位") > -1) {
          sxt_type = "sxt_sw"
          iconClass = "sxtPoint3"
        } else if (text.indexOf("排污") > -1) {
          sxt_type = "sxt_pw"
          iconClass = "sxtPoint4"
        } else if (text.indexOf("电梯") > -1 || text.indexOf("电动车") > -1) {
          sxt_type = "sxt_dt"
          iconClass = "sxtPoint5"
        } else if (text.indexOf("垃圾") > -1) {
          sxt_type = "sxt_shlj"
          iconClass = "sxtPoint6"
        } else if (text.indexOf("高空") > -1) {
          sxt_type = "sxt_gkpw"
          iconClass = "sxtPoint7"
        } else if (text.indexOf("防火") > -1) {
          sxt_type = "sxt_znfh"
          iconClass = "sxtPoint8"
        } else if (text.indexOf("游泳") > -1) {
          sxt_type = "sxt_yydy"
          iconClass = "sxtPoint9"
        } else {
          sxt_type = "shexiangtouPoint"
          iconClass = "sxtPoint1"
        }
        // sceneObject.url = `/img/myimg/point/${sxt_type}.png`
        // sceneObject.innerHTML = `
        //   <div class="poibox">
        //     <div class="${iconClass}"></div>
        //     <div class="${iconClass}_box">${pointData.name}</div>
        //   </div>
        // `
        // 设置显示文本名称
        sceneObject.name = pointData.name
        sceneObject.mode = "SquareH02"
        sceneObject.allowPicking = true
        const attr = {
          type: sxt_type,
          data: text,
          device_no,
          name: pointData.name
        }
        sceneObject.attr = attr
        sceneObject.widgetEvent.don((e) => {
          if (e.type === "leftClick") {
            emit("clickPoi", attr)
          }
        })
        poiArr.value.push(sceneObject)
      }
      // let iconClass = ""
      // if (pointData.type === "shexiangtou") {

      // }
      // let sxt_type = "摄像头"
      // const text = pointData.properties.style.label.text
      // const text = pointData.style.label.text
      // const name = pointData.name
      // const text = pointData.type_text
      // const device_no = pointData.device_no

      // // 创建 Mars3D 中的点对象(默认点位样式)
      // const pointGraphic = new mars3d.graphic.DivGraphic({
      //   position: coordinates,
      //   frameRate: 1,
      //   attr: {
      //     type: sxt_type,
      //     data: text,
      //     device_no
      //   },
      //   show: true,
      //   style: {
      //     clampToGround: true,
      //     distanceDisplayCondition: true,
      //     distanceDisplayCondition_far: 400000,
      //     distanceDisplayCondition_near: 0,
      //     horizontalOrigin: 1,
      //     html: `<div class="${iconClass}" >
      //         <div class="${iconClass}_box">${name}</div>
      //     </div>`,
      //     verticalOrigin: 0
      //   }
      // })
      // pointGraphic.on(mars3d.EventType.click, function (event: any) {
      //   console.log("点击了点位", event)
      //   emit("clickPoi", event)
      // })
      // 将点对象添加到图层
      // pointLayer.addGraphic(pointGraphic)
      // alert("设置poi")
    })
  }
}

const settfsjPoint = async (flag) => {
  console.log(flag)
  if (!flag) {
    return pointLayer.clear()
  }

  // map.pauseCameraViewList()
  // let sxjPointList = null
  const res = await $api.get("api/index/get_appeal_list", { big_type: 3, page: 1, pageSize: 10 })
  console.log(res)
  const pointArr = res.data.data
  pointArr.forEach((item: any) => {
    const coordinates = item.location
    const pointGraphic = new mars3d.graphic.DivGraphic({
      position: coordinates,
      frameRate: 1,
      show: true,
      attr: {
        type: "tfsj",
        data: item
      },
      style: {
        clampToGround: true,
        distanceDisplayCondition: true,
        distanceDisplayCondition_far: 400000,
        distanceDisplayCondition_near: 0,
        horizontalOrigin: 1,
        html: `<div class="zdfxPoint1" >
              <div class="zdfxPoint1_box">
                <div style="font-size:12px; font-weight:bold;color:#ffffff;"><span style="color:#FF3131;font-size:12px;">${item.appear_type}</div>
                <div style="font-size:10px" class="ellipsis2">报警地点：${item.event_address}</div>
              </div>
          </div>`,
        verticalOrigin: 0
      }
    })
    // pointList.value.push(pointGraphic)
    pointGraphic.on(mars3d.EventType.click, function (event: any) {
      console.log("点击了点位", event)
      emit("clickPoi", event)
    })
    // 将点对象添加到图层
    console.log("PIO点", pointGraphic)
    pointLayer.addGraphic(pointGraphic)
  })
  // fetch("/api/index/get_appeal_list", { big_type: 3, page: 1, pageSize: 10 })

  //   .then(response => response.json())
  //   .then(data => {
  //     console.log(data)
  //     // sxjPointList = data
  //     // // const pointArr = sxjPointList.features
  //     // const pointArr = sxjPointList.data
  //     // let i = 0
  //     // pointArr.forEach((pointData: any) => {
  //     //   i++
  //     //   // 解析点位的坐标
  //     //   // const coordinates = pointData.geometry.coordinates
  //     //   const coordinates = pointData.position
  //     //   let iconClass = ""
  //     //   // if (pointData.type === "shexiangtou") {

  //     //   // }
  //     //   let sxt_type = "摄像头"
  //     //   // const text = pointData.properties.style.label.text
  //     //   const text = pointData.style.label.text
  //     //   if (text.indexOf("人脸") > -1) {
  //     //     sxt_type = "sxt_rl"
  //     //     iconClass = "sxtPoint2"
  //     //   } else if (text.indexOf("水位") > -1) {
  //     //     sxt_type = "sxt_sw"
  //     //     iconClass = "sxtPoint3"
  //     //   } else if (text.indexOf("排污") > -1) {
  //     //     sxt_type = "sxt_pw"
  //     //     iconClass = "sxtPoint4"
  //     //   } else if (text.indexOf("电梯") > -1) {
  //     //     sxt_type = "sxt_dt"
  //     //     iconClass = "sxtPoint5"
  //     //   } else if (text.indexOf("垃圾") > -1) {
  //     //     sxt_type = "sxt_shlj"
  //     //     iconClass = "sxtPoint6"
  //     //   } else if (text.indexOf("高空") > -1) {
  //     //     sxt_type = "sxt_gkpw"
  //     //     iconClass = "sxtPoint7"
  //     //   } else if (text.indexOf("防火") > -1) {
  //     //     sxt_type = "sxt_znfh"
  //     //     iconClass = "sxtPoint8"
  //     //   } else {
  //     //     sxt_type = "摄像头"
  //     //     iconClass = "sxtPoint1"
  //     //   }
  //     //   // 创建 Mars3D 中的点对象(默认点位样式)
  //     //   const pointGraphic = new mars3d.graphic.DivGraphic({
  //     //     position: coordinates,
  //     //     frameRate: 1,
  //     //     attr: {
  //     //       type: sxt_type,
  //     //       data: text
  //     //     },
  //     //     show: true,
  //     //     style: {
  //     //       clampToGround: true,
  //     //       distanceDisplayCondition: true,
  //     //       distanceDisplayCondition_far: 400000,
  //     //       distanceDisplayCondition_near: 0,
  //     //       horizontalOrigin: 1,
  //     //       html: `<div class="${iconClass}" >
  //     //         <div class="${iconClass}_box">${text}</div>
  //     //     </div>`,
  //     //       verticalOrigin: 0
  //     //     },
  //     //     type: "div"
  //     //   })
  //     //   // pointList.value.push(pointGraphic)
  //     //   pointGraphic.on(mars3d.EventType.click, function (event: any) {
  //     //     console.log("点击了点位", event)
  //     //     emit("clickPoi", event)
  //     //   })
  //     //   // 将点对象添加到图层
  //     //   pointLayer.addGraphic(pointGraphic)
  //     //   // alert("设置poi")
  //     // })

  //   })

  //   .catch(error => {

  //     console.error("There was an error fetching the JSON data!", error)

  //   })
}

const setFxdListMian = (type, list) => {
  if (list.length === 0) {
    return false
  }
  const fxdPointList = list
  const arr = fxdPointList
  let i = 0
  arr.forEach((e) => {
    i++
    const mpositions = JSON.parse(e.fanwei)
    e.positions = mpositions
    e.data = {}
    mpositions.forEach((m) => {
      m[2] = 0
    })
    let wallcolor = [255, 214, 49, 1]
    if (e.fxdj === "1") {
      wallcolor = [255, 49, 49, 1]
    } else if (e.fxdj === "2") {
      wallcolor = [255, 183, 49, 1]
    } else if (e.fxdj === "3") {
      wallcolor = [255, 214, 49, 1]
    }
    const sceneObject = objectsManager.createSceneObject(ESPolygonFence)
    sceneObject.points = mpositions
    // 围栏高度
    sceneObject.height = 50
    // 材质模式
    sceneObject.materialMode = "honeycomb"
    // 围栏颜色
    poiArr.value.push(sceneObject)
    // e.style = {
    //   axisY: true,
    //   color: wallcolor,
    //   image: "https://data.mars3d.cn/img/textures/fence.png",
    //   materialType: "LineFlow",
    //   repeat_x: 5,
    //   repeat_y: 1,
    //   speed: 10
    // }
    // const graphic = new mars3d.graphic.WallEntity({
    //   positions: mpositions,
    //   style: e.style,
    //   attr: { remark: "风险点" }
    // })
    if (e.fxdj === "1") {
      setfxdPoint1(e, "zdfengxian")
    } else if (e.fxdj === "2") {
      setfxdPoint1(e, "jdfengxian")
    } else {
      setfxdPoint1(e, "ybfengxian")
    }
  })
}

const setFxdMian = (type = "") => {
  pointLayer.clear()
  let fxdPointList = null
  fetch("/img/json/fxdPointList.json")
    .then((response) => response.json())
    .then((data) => {
      fxdPointList = data
      const arr = fxdPointList.data
      let i = 0
      arr.forEach((e) => {
        i++
        e.positions.forEach((m) => {
          m[2] = 0
        })
        let wallcolor = ""
        if (i === 2 || i === 4 || i === 6) {
          wallcolor = "#FF3131"
        } else if (i === 3 || i === 6 || i === 9) {
          wallcolor = "#FFB731"
        } else {
          wallcolor = "#FFD631"
        }
        e.style = {
          axisY: true,
          color: wallcolor,
          image: "https://data.mars3d.cn/img/textures/fence.png",
          materialType: "LineFlow",
          repeat_x: 5,
          repeat_y: 1,
          speed: 10
        }
        // console.log(wallcolor)
        // console.log(e.style)
        // const graphic = new mars3d.graphic.PolygonEntity({
        const graphic = new mars3d.graphic.WallEntity({
          positions: e.positions,
          style: e.style,
          // style: {
          // clampToGround: false,
          // color: "#55ff33",
          // label: {
          //   clampToGround: false,
          //   color: wallcolor,
          //   distanceDisplayCondition: true,
          //   distanceDisplayCondition_far: 500000,
          //   distanceDisplayCondition_near: 0,
          //   font_size: 18,
          //   text: e.data.address
          // },
          // opacity: 0.5,
          // materialType: "Color",
          // width: 3
          //   axisY: true,
          //   color: wallcolor,
          //   image: "https://data.mars3d.cn/img/textures/fence.png",
          //   materialType: "LineFlow",
          //   repeat_x: 5,
          //   repeat_y: 1,
          //   speed: 10
          // },
          attr: { remark: "风险点" }
        })
        if (type === "") {
          pointLayer.addGraphic(graphic)
          if (i === 2 || i === 4 || i === 6) {
            setfxdPoint(e, "zdfengxian")
          } else if (i === 3 || i === 5 || i === 9) {
            setfxdPoint(e, "jdfengxian")
          } else {
            setfxdPoint(e, "ybfengxian")
          }
        } else {
          if (type === "zd") {
            if (i === 2 || i === 4 || i === 6) {
              pointLayer.addGraphic(graphic)
              setfxdPoint(e, "zdfengxian")
            }
          } else if (type === "jd") {
            if (i === 3 || i === 6 || i === 9) {
              pointLayer.addGraphic(graphic)
              setfxdPoint(e, "jdfengxian")
            }
          } else {
            if (i !== 2 && i !== 4 && i !== 6 && i !== 3 && i !== 5 && i !== 9) {
              pointLayer.addGraphic(graphic)
              setfxdPoint(e, "ybfengxian")
            }
          }
        }
      })
    })

    .catch((error) => {
      console.error("There was an error fetching the JSON data!", error)
    })
}
const setfxdPoint = (pointData, type) => {
  // pointLayer.clear()
  // 解析点位的坐标
  const coordinates = pointData.positions[0]
  let iconClass = "ybfxPoint1"
  let fxlx = "一般风险"
  let fontcolor = "#00C8FF"
  if (type === "zdfengxian") {
    iconClass = "zdfxPoint1"
    fxlx = "重大风险"
    fontcolor = "#FF3131"
  } else if (type === "jdfengxian") {
    iconClass = "jdfxPoint1"
    fxlx = "较大风险"
    fontcolor = "#FFB731"
  } else if (type === "ybfengxian") {
    iconClass = "ybfxPoint1"
    fxlx = "一般风险"
    fontcolor = "#00c8ff"
  }
  // 创建 Mars3D 中的点对象(默认点位样式)
  const pointGraphic = new mars3d.graphic.DivGraphic({
    position: coordinates,
    frameRate: 1,
    attr: {
      type: "风险点",
      data: pointData.data
    },
    show: true,
    style: {
      clampToGround: true,
      distanceDisplayCondition: true,
      distanceDisplayCondition_far: 400000,
      distanceDisplayCondition_near: 0,
      horizontalOrigin: 1,
      html: `<div class="${iconClass}" >
              <div class="${iconClass}_box">
                <div style="font-size:12px; font-weight:bold;color:#ffffff;"><span style="color:${fontcolor};font-size:12px;">${fxlx}</span> | ${pointData.data.address}</div>
                <div style="font-size:10px">负责人：${pointData.data.name}</div>
                <div style="font-size:10px">联系电话：${pointData.data.phone}</div>
              </div>
          </div>`,
      verticalOrigin: 0
    }
  })
  // pointList.value.push(pointGraphic)
  pointGraphic.on(mars3d.EventType.click, function (event: any) {
    console.log("点击了点位", event)
    emit("clickPoi", event)
  })
  // 将点对象添加到图层
  pointLayer.addGraphic(pointGraphic)
  // alert("设置poi")
}

const setfxdPoint1 = (pointData, type) => {
  console.log(pointData)
  // pointLayer.clear()
  // 解析点位的坐标
  const coordinates = pointData.positions[0]
  let iconClass = "ybfxPoint1"
  let fxlx = "一般风险"
  let fontcolor = "#00C8FF"
  let colorRgba: any = [255, 49, 49, 1]
  let textBackground = "http://ylz.chuangxing.ren/assets/img/fk1.png"
  let img = "http://ylz.chuangxing.ren/assets/img/sq1.png"
  if (type === "zdfengxian") {
    iconClass = "zdfxPoint1"
    fxlx = "重大风险"
    fontcolor = "#FF3131"
    colorRgba = [255, 49, 49, 1]
    textBackground = "http://ylz.chuangxing.ren/assets/img/fk1.png"
    img = "http://ylz.chuangxing.ren/assets/img/sq2.png"
  } else if (type === "jdfengxian") {
    iconClass = "jdfxPoint1"
    fxlx = "较大风险"
    fontcolor = "#FFB731"
    colorRgba = [255, 183, 49, 1]
    textBackground = "http://ylz.chuangxing.ren/assets/img/fk2.png"
    img = "http://ylz.chuangxing.ren/assets/img/sq3.png"
  } else if (type === "ybfengxian") {
    iconClass = "ybfxPoint1"
    fxlx = "一般风险"
    fontcolor = "#00c8ff"
    colorRgba = [255, 255, 255, 1]
    img = "http://ylz.chuangxing.ren/assets/img/sq1.png"
    textBackground = "http://ylz.chuangxing.ren/assets/img/fk3.png"
  }

  const sceneObject = objectsManager.createSceneObject(ESPoi2D)
  sceneObject.position = coordinates
  sceneObject.mode = "Custom"
  sceneObject.style = {
    image: img,
    imageSize: [70, 80],
    text: "   " + fxlx + " | " + pointData.name + "   ",
    textOffset: [
      // 文字偏移
      0, 0
    ],
    textColor: colorRgba,
    textBackground,
    textBackgroundColor: colorRgba,
    textBoxOffset: [
      // 文字背景偏移
      25, 0
    ],
    textBoxAlign: "start", // 文字背景对齐
    useDefault: true, // 是否使用默认样式
    textBoxMode: "default" // 文字背景模式
  }
  // sceneObject.innerHTML = `
  //   <div class="poibox">
  //     <div class="${iconClass}"></div>
  //     <div class="${iconClass}_box">
  //       <div style="font-size:12px; font-weight:bold;color:#ffffff;"><span style="color:${fontcolor};font-size:12px;">${fxlx}</span> | ${pointData.name}</div>
  //       <div style="font-size:10px">现场联系电话：${pointData.phone}</div>
  //     </div>
  //   </div>
  //     `
  // sceneObject.anchor = [0, 0.8]
  // sceneObject.renderInUE = true

  poiArr.value.push(sceneObject)

  // 创建 Mars3D 中的点对象(默认点位样式)
  // const pointGraphic = new mars3d.graphic.DivGraphic({
  //   position: coordinates,
  //   frameRate: 1,
  //   attr: {
  //     type: "风险点",
  //     data: pointData
  //   },
  //   show: true,
  //   style: {
  //     clampToGround: true,
  //     distanceDisplayCondition: true,
  //     distanceDisplayCondition_far: 400000,
  //     distanceDisplayCondition_near: 0,
  //     horizontalOrigin: 1,
  //     html: `<div class="${iconClass}" >
  //             <div class="${iconClass}_box">
  //               <div style="font-size:12px; font-weight:bold;color:#ffffff;"><span style="color:${fontcolor};font-size:12px;">${fxlx}</span> | ${pointData.name}</div>
  //               <div style="font-size:10px">联系电话：${pointData.phone}</div>
  //             </div>
  //         </div>`,
  //     verticalOrigin: 0
  //   }
  // })
  // pointList.value.push(pointGraphic)
  // pointGraphic.on(mars3d.EventType.click, function (event: any) {
  //   console.log("点击了点位", event)
  //   emit("clickPoi", event)
  // })
}
let hongArr = []
const clearsqgkPoint = () => {
  // eslint-disable-next-line array-callback-return
  hongArr.map((element) => {
    objectsManager.destroySceneObject(element)
  })

  hongArr = []
}
const bindLayerPopup = () => {
  pointLayerLou.bindPopup(
    function (event) {
      const attr = {}
      attr["楼栋名称"] = event.graphic.attr.building_name
      attr["住户数量"] = event.graphic.attr.resident_count
      return mars3d.Util.getTemplateHtml({ title: event.graphic.attr.building_name, template: "all", attr })
    },
    {
      className: "custom-popup" // 自定义CSS类名
    }
  )
}

const setLddyPoint = () => {
  const pointArr = [
    {
      type: "ld",
      name: "一栋一单元",
      msg: "1-1",
      lng: 105.5624,
      lat: 30.46858,
      alt: 110.41,
      creamData: { lat: 30.467157, lng: 105.564617, alt: 144, heading: 306.5, pitch: -19 }
    },
    {
      type: "ld",
      name: "二栋一单元",
      msg: "2-1",
      lng: 105.56285,
      lat: 30.4691,
      alt: 110.4,
      creamData: { lat: 30.467695, lng: 105.564976, alt: 144.2, heading: 306.5, pitch: -19 }
    },
    {
      type: "ld",
      name: "二栋二单元",
      msg: "2-1",
      lng: 105.56319,
      lat: 30.4695,
      alt: 110.39,
      creamData: { lat: 30.468132, lng: 105.565286, alt: 144.3, heading: 306.5, pitch: -19 }
    }
  ]

  pointArr.forEach((pointData: any) => {
    const sceneObject = objectsManager.createSceneObject(ESGeoDiv)
    sceneObject.position = [pointData.lng, pointData.lat, pointData.alt]
    sceneObject.innerHTML = `<div class="Point" >
              <div class="Point_box">${pointData.name}</div>
          </div>`
    console.log("sceneObject:", sceneObject)
    sceneObject.allowPicking = true
    sceneObject.renderInUE = true
    sceneObject.pickedEvent.don((e) => {
      console.log("点击了点位", e)
    })
    poiArr.value.push(sceneObject)
    // 解析点位的坐标
    // const coordinates = [pointData.lng, pointData.lat, pointData.alt]
    // let iconClass = ""
    // iconClass = "Point"
    // console.log(coordinates)
    // const pointGraphic = new mars3d.graphic.DivGraphic({
    //   position: coordinates,
    //   attr: {
    //     type: pointData.type,
    //     creamData: pointData.creamData,
    //     msg: pointData.msg
    //     // lcData: pointData.lcData
    //   },
    //   show: true,
    //   style: {
    //     distanceDisplayCondition: true,
    //     distanceDisplayCondition_far: 1000,
    //     distanceDisplayCondition_near: 0,
    //     html: `<div class="${iconClass}" >
    //           <div class="${iconClass}_box">${pointData.name}</div>
    //       </div>`
    //   }
    // })
    // pointList.value.push(pointGraphic)
    // pointGraphic.on(mars3d.EventType.click, async function (event: any) {
    //   console.log("点击了点位", event)
    //   const type = event.target.attr.type
    //   if (type === "ld") {
    //     const res = await getLouInfo(event.target.attr.msg)
    //     event.target.attr.building_name = res.building_name
    //     event.target.attr.resident_count = res.resident_count
    //     console.log(event.target.attr)
    //     const creamData = event.target.attr.creamData
    //     map.setCameraView(creamData)
    //     const lcData = event.target.attr.lcData
    //     // setLcData(lcData)
    //   } else if (type === "lc") {
    //     console.log("点击了楼层", event)
    //   }
    //   // emit("clickPoi", event)
    // })
    // // 将点对象添加到图层
    // pointLayerLou.addGraphic(pointGraphic)
    // alert("设置poi")
  })
}

// 获取单层楼
const getLouInfo = async (room_number) => {
  const res = await $api.get("api/index/get_people_d", { room_number })
  return res.data
}

// 获取所有楼层特殊人群
const getLouInfoAll = async () => {
  try {
    const res = await $api.get("api/index/get_people_all")
    if (res.data && res.data.length > 0) {
      res.data.forEach((item) => {
        let position = []
        const lou = item.room_number.split("-")[2]
        if (item.room_number.indexOf("1-1-") > -1) {
          position = [105.562520548009, 30.468488886550826]
        } else if (item.room_number.indexOf("2-1-") > -1) {
          position = [105.56295045469845, 30.468999744722105]
        } else if (item.room_number.indexOf("2-2-") > -1) {
          position = [105.56329560585276, 30.46942337031762]
        }
        position.push((lou * 105) / 34 + 105 / 34 / 2)
        const sceneObject = objectsManager.createSceneObject(ESGeoDiv)
        sceneObject.position = position
        sceneObject.innerHTML = `<div style="width:10px;height:10px;background-color:red;border-radius:50%;border:2px solid white" ></div>`
        sceneObject.renderInUE = true

        sceneObject.allowPicking = true
        sceneObject.widgetEvent.don((e) => {
          if (e.type === "leftClick") {
            const arr = item.room_number.split("-").splice(0, 3)
            loucengModalRef.value.show({ data: arr.join("-") })
          }
        })
        poiArr.value.push(sceneObject)

        // 添加点
        // const graphic = new mars3d.graphic.PointEntity({
        //   position,
        //   style: {
        //     color: "#ff0000",
        //     pixelSize: 5,
        //     outline: true,
        //     outlineColor: "#ffffff",
        //     outlineWidth: 2,
        //     distanceDisplayCondition: true,
        //     distanceDisplayCondition_far: 1000,
        //     distanceDisplayCondition_near: 0
        //   },
        //   attr: { remark: "示例2" }
        // })
        // graphic.on(mars3d.EventType.click, function (event) {
        //   const arr = item.room_number.split("-").splice(0, 3)
        //   console.log(arr)
        //   loucengModalRef.value.show({ data: arr.join("-") })
        // })
        // pointLayerLou.addGraphic(graphic)
      })
    }
  } catch (error) {}

  // return res.data
}

const setLcData = (arr) => {
  lcLayer.clear()
  arr.forEach((pointData: any) => {
    // 解析点位的坐标
    const coordinates = [pointData.lng, pointData.lat, pointData.alt]
    let iconClass = ""
    iconClass = "lcPoint"
    console.log(coordinates)
    // 创建 Mars3D 中的点对象(默认点位样式)
    const pointGraphic = new mars3d.graphic.DivGraphic({
      position: coordinates,
      attr: {
        type: pointData.type,
        creamData: pointData.creamData
      },
      show: true,
      style: {
        distanceDisplayCondition: true,
        distanceDisplayCondition_far: 1000,
        distanceDisplayCondition_near: 0,
        html: `<div class="${iconClass}" >
              <div class="${iconClass}_box">${pointData.name}</div>
          </div>`
      }
    })
    pointGraphic.bindPopup(() => {
      return `<div>
                  <div>门户：${pointData.name + pointData.mh}</div>
                  <div>户主：${pointData.hz}</div>
                  <div>联系电话：${pointData.phone}</div>
                  <div>居住人数：${pointData.jzrs}</div>
                  <div>备注：${pointData.bz}</div>
            </div>`
    })
    // pointList.value.push(pointGraphic)
    pointGraphic.on(mars3d.EventType.click, function (event: any) {
      console.log("点击了点位", event)
      const type = event.target.attr.type
      if (type === "lc") {
        console.log("点击了楼层", event)
      }
      // emit("clickPoi", event)
    })
    // 将点对象添加到图层
    lcLayer.addGraphic(pointGraphic)
    // alert("设置poi")
  })
}

// const set
const setSpPoint = () => {
  // pointLayer.clear()
  const pointArr = [
    {
      name: "喜阳阳便利店",
      lxr: "阳琴",
      phone: "15292530255",
      address: "湖翠路17号",
      lng: 105.5626,
      lat: 30.46861,
      alt: 3.9
    },
    {
      name: "优亿家生活超市",
      lxr: "陈建琼",
      phone: "15908300172",
      address: "湖翠路29号、31号",
      lng: 105.56282359640761,
      lat: 30.46885999361084,
      alt: 3.9
    },
    {
      name: "酱香猪脚饭",
      lxr: "杨芸",
      phone: "18382557731",
      address: "湖翠路43号",
      lng: 105.56321,
      lat: 30.46923,
      alt: 3.9
    },
    {
      name: "罗辉再生资源回收店",
      lxr: "罗辉",
      phone: "17760172393",
      address: "湖翠路59号",
      lng: 105.56339,
      lat: 30.46944,
      alt: 3.9
    }
  ]

  pointArr.forEach((pointData: any) => {
    // 解析点位的坐标
    const sceneObject = objectsManager.createSceneObject(ESGeoDiv)
    sceneObject.position = [pointData.lng, pointData.lat, pointData.alt]
    sceneObject.innerHTML = `
        <div class="poibox">
          <div class="sjPoint1" ></div>
          <div class="sjPoint1_box">${pointData.name}</div>
        </div>`
    sceneObject.allowPicking = true
    sceneObject.renderInUE = true
    sceneObject.anchor = [0, 0.8]
    // sceneObject.style = {
    //   fontSize: 14,
    //   text: pointData.name,
    //   textBackground: "https://www.earthsdk.com/example3/thumbnail/you.png", // 文字背景
    //   textBackgroundColor: [// 文字背景颜色 :注意【UE】下该值设置为[1,1,1,1]
    //     1,
    //     1,
    //     1,
    //     1
    //   ],
    //   textBackgroundSize: [// 文字背景大小
    //     120,
    //     38
    //   ],
    //   textColor: [// 文字颜色
    //     1,
    //     1,
    //     1,
    //     1
    //   ],
    //   textOffset: [// 文字偏移
    //     0,
    //     0
    //   ],
    //   textBoxOffset: [// 文字背景偏移
    //     0,
    //     0
    //   ],
    //   textBoxAlign: "center" // 文字背景对齐
    // }
    poiArr.value.push(sceneObject)
  })
}
const setSqbjMain = () => {
  removeAll()
  setSpPoint()
  setLddyPoint()
  getLouInfoAll()
}

const setWgpqMain = async () => {
  removeAll()
  objectsManager.activeViewer.flyIn([105.56597580834347, 30.456314762113752, 2490.8596255459856], [330.140747, -54.88369, 2.764555], 3)
  // map.setCameraView({ lat: 30.44305, lng: 105.559968, alt: 2786.5, heading: 359.2, pitch: -45 })
  let wgpqList = null
  const res = await $api.get("/api/index/get_dept_list")
  if (res.code === 1) {
    wgpqList = res.data.list
    console.log("网格点位", wgpqList)
    wgpqList.forEach((e) => {
      setWgyPoi(e)
    })
  }

  fetch("/img/json/qiang1.json")
    .then((response) => response.json())
    .then((data) => {
      const arr = data.data
      console.log(arr)
      // arr.forEach((e) => {
      //   e.positions.forEach((m) => {
      //     m[2] = 0
      //   })
      //   const aP = JSON.parse(JSON.stringify(e.positions))
      //   aP.forEach((m) => {
      //     m[2] = 150
      //   })
      //   const graphic = new mars3d.graphic.WallEntity({
      //     positions: e.positions,
      //     style: {
      //       // clampToGround: false,
      //       color: e.style.color,
      //       diffHeight: 30,
      //       opacity: 0.8,
      //       materialType: "Color",
      //       width: 3
      //     },
      //     attr: { remark: "网格" }
      //   })
      //   pointLayer.addGraphic(graphic)
      //   // setWgyPoi(e)
      // })
    })

    .catch((error) => {
      console.error("There was an error fetching the JSON data!", error)
    })
}

const pointLayerClear = () => {
  pointLayer.clear()
}

const clearPoint = (type, map) => {
  removeAll()
  // map.pauseCameraViewList()
  if (type === "sqgk") {
    setPoint()
  } else if (type === "wwsg") {
    setWgpqMain()
    // setWgyPoi()
  } else if (type === "lhll") {
    setqyPoint()
  } else if (type === "elpa") {
    // setXldPoint()
    // setfxdPoint()
    setsxtPoint()
  }
}

const setGgfwPoint = (e) => {
  removeAll()
  e.forEach((pointData: any) => {
    // 解析点位的坐标
    const coordinates = [parseFloat(pointData.lng), parseFloat(pointData.lat), 0]
    const iconClass = "ggfwPoint1"

    const sceneObject = objectsManager.createSceneObject(ESGeoDiv)
    sceneObject.position = coordinates
    sceneObject.innerHTML = `
          <div class="poibox">
            <div class="${iconClass}" ></div>
            <div class="${iconClass}_box">${pointData.ggfw_name}</div>
          </div>`
    sceneObject.renderInUE = true
    sceneObject.anchor = [0, 0.8]
    const attr = {
      type: "ggfw",
      data: pointData
    }
    sceneObject.allowPicking = true
    sceneObject.widgetEvent.don((e) => {
      if (e.type === "leftClick") {
        emit("clickPoi", attr)
      }
    })
    poiArr.value.push(sceneObject)
    // if (pointData.type === "qiye") {
    //   iconClass = "qyPoint1"
    // } else if (pointData.type === "shangjia") {
    //   iconClass = "sjPoint1"
    // }
    // 创建 Mars3D 中的点对象(默认点位样式)
    // const pointGraphic = new mars3d.graphic.DivGraphic({
    //   position: coordinates,
    //   frameRate: 1,
    //   attr: {
    //     type: "ggfw",
    //     data: pointData
    //   },
    //   show: true,
    //   style: {
    //     clampToGround: true,
    //     distanceDisplayCondition: true,
    //     distanceDisplayCondition_far: 400000,
    //     distanceDisplayCondition_near: 0,
    //     horizontalOrigin: 1,
    //     html: `<div class="${iconClass}" >
    //           <div class="${iconClass}_box">${pointData.ggfw_name}</div>
    //       </div>`,
    //     verticalOrigin: 0
    //   }
    // })
    // pointList.value.push(pointGraphic)
    // pointGraphic.on(mars3d.EventType.click, function (event: any) {
    //   console.log("点击了点位", event)
    //   emit("clickPoi", event)
    // })
    // 将点对象添加到图层
    // pointLayer.addGraphic(pointGraphic)
    // alert("设置poi")
  })
}
const toCenter = (e) => {
  map.pauseCameraViewList()
  const point1 = map.getCameraView()
  point1.alt = 400
  point1.duration = 2
  point1.stop = 0
  map.setCameraView(point1)
  setTimeout(function () {
    const lat = parseFloat((e[1] - 0.003758).toFixed(6))
    const point = { lng: e[0], lat, alt: 400, duration: 2, stop: 0, pitch: -38 }
    console.log(point)
    map.setCameraView(point)
  }, 1000)
}

const setDqfwzxPoint = (points, text) => {
  // 解析点位的坐标
  const coordinates = points
  const iconClass = "dqfwzxPoint"
  // if (pointData.type === "qiye") {
  //   iconClass = "qyPoint1"
  // } else if (pointData.type === "shangjia") {
  //   iconClass = "sjPoint1"
  // }
  // 创建 Mars3D 中的点对象(默认点位样式)
  const pointGraphic = new mars3d.graphic.DivGraphic({
    position: coordinates,
    frameRate: 1,
    attr: {
      type: "dqfwzx"
    },
    show: true,
    style: {
      clampToGround: true,
      horizontalOrigin: 1,
      html: `<div class="${iconClass}" style="background-image:url('/img/myimg/point/dqfwzx/${text}.png')" ></div>`,
      verticalOrigin: 0,
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 4000)
    }
  })
  // pointList.value.push(pointGraphic)
  // pointGraphic.on(mars3d.EventType.click, function (event: any) {
  //   console.log("点击了点位", event)
  //   emit("clickPoi", event)
  // })
  console.log("党群服务中心点位")
  // 将点对象添加到图层
  pointLayer.addGraphic(pointGraphic)
  // alert("设置poi")
}

const setCamera = (e) => {
  map.setCameraView(e)
}

// 销毁场景对象destroySceneObjet
const removeAll = () => {
  if (poiArr.value.length === 0) {
    return
  }
  poiArr.value.forEach((item) => {
    objectsManager.destroySceneObject(item)
  })
  poiArr.value = []
}

// 获取发送警报的摄像头
const get_appeal = (e) => {
  const poi = poiArr.value.filter((item) => item.attr.name === e.device_name)[0]
  poi.scale = [2, 2, 2]
  console.log(poi)
  console.log(e)
  console.log(poiArr.value)
}

defineExpose({
  // setPoint,
  // setCamera,
  clearPoint,
  // setDqfwzxPoint,
  // pointLayerClear,
  setSqbjMain,
  setsxtPoint,
  setXldPoint,
  // setFxdMian,
  setFxdListMian,
  removeAll,
  // toCenter,
  setWzcbdPoint,
  setGgfwPoint,
  // settfsjPoint
  setgwjfPoint,
  get_appeal
})
const clickLou = (res) => {
  let lou
  if (res.pickResult.name === "StaticMeshActor_272") {
    lou = "1-1-"
  } else if (res.pickResult.name === "StaticMeshActor_270") {
    lou = "2-1-"
  } else if (res.pickResult.name === "StaticMeshActor_271") {
    lou = "2-2-"
  }
  // 3. 将世界坐标转换为经纬度
  const lon = res.pickResult.position[0]
  const lat = res.pickResult.position[1]
  const height = res.pickResult.position[2]
  console.log(`经度: ${lon}, 纬度: ${lat}, 高度: ${height}`)
  // 计算楼层
  const totalHeight = 105 // 总高度
  const totalFloors = 34 // 总层数
  floorHeight.value = totalHeight / totalFloors // 每层高度
  // 计算当前楼层（+1是因为楼层从1开始计数）
  let currentFloor = Math.floor(height / floorHeight.value) + 1
  // 确保楼层在有效范围内
  currentFloor = Math.max(1, Math.min(totalFloors, currentFloor))
  lou += currentFloor
  console.log(`当前高度: ${height.toFixed(2)}米，所在楼层: ${currentFloor}, 楼层名称: ${lou}`)
  loucengModalRef.value.show({ data: lou })
}
const container = ref<HTMLDivElement>()
onMounted(() => {
  // initMars3d()
  console.log("开始创建")
  const dom = container.value
  console.log(dom)
  if (!dom) {
    return
  }
  objectsManager.viewerCreatedEvent.don((viewer: any) => {
    // 鼠标click事件的时候,定义自定义的pick事件
    viewer.clickEvent.don((e) => {
      viewer.pick(e.screenPosition, "customPick").then((res) => {
        console.log(res)

        console.log("点击点位坐标：", res.pickResult.position)
        if (
          res.pickResult.name === "StaticMeshActor_272" ||
          res.pickResult.name === "StaticMeshActor_270" ||
          res.pickResult.name === "StaticMeshActor_271"
        ) {
          clickLou(res)
        }
      })
    })
  })
  const ueViewer = objectsManager.createUeViewer(dom, "http://218.88.233.70:9007/", "xining")
  console.log("ue视口：", ueViewer)
  // ueViewer.currentTime = 1750052654
  ueViewer.currentTime = 1750776000

  objectsManager.viewerCreatedEvent.don((viewer) => {
    objectsManager.activeViewer.flyIn([105.56484, 30.46759, 135.68], [308.72, -17.52, 0], 1)
  })
  // ueViewer.fog = 0
  // ueViewer.atmosphere = true

  ueViewer.statusChanged.don((status) => {
    console.log("视口状态:", status)
    if (status === "Creating") {
      console.log("视口正在创建")
    } else if (status === "Created") {
      console.log("视口创建完成")
      console.log("视口创建完成:", objectsManager)
      emit("onload", objectsManager)
      // 获取所有特殊人群
      // getLouInfoAll()
    }
  })
  const sceneObject = objectsManager.createSceneObject(ES3DTileset)
  sceneObject.url = "https://wsttest-admin.chuangxing.ren/0722/OldData/tileset.json"
  sceneObject.offset = [0, 0, -310]
  console.log("新场景对象", sceneObject)
  sceneObject.tilesetReady.don(() => {
    console.log("老模型加载完成")
    // sceneObject.flyTo()
  })

  // 标点

  // 挖坑
  // const excavateObject = objectsManager.createSceneObject(ESExcavate)
  // excavateObject.points = [
  //   [
  //     105.56005,
  //     30.46660,
  //     0
  //   ],
  //   [
  //     105.55133,
  //     30.47671,
  //     0
  //   ],
  //   [
  //     105.55882,
  //     30.48020,
  //     0
  //   ],
  //   [
  //     105.56562,
  //     30.47139,
  //     0
  //   ]
  // ]
})
const arreds = ref([])
const createPoint = () => {
  const sceneObject = objectsManager.createSceneObject(ESCameraViewCollection)
  sceneObject.addView()
  console.log("视角对象:", sceneObject.views)
}

const clearAll = () => {
  arreds.value.forEach((item) => {
    objectsManager.destroySceneObject(item)
  })
  arreds.value = []
}

// 组件卸载之前销毁mars3d实例
onUnmounted(() => {
  if (map) {
    map.destroy()
    map = null
  }
  logInfo("map销毁完成", map)
})
</script>

<style lang="less">
.poibox {
  display: flex;
  align-items: center;
}

.qyPoint1 {
  position: relative;
  background-image: url("/img/myimg/point/qiyePoint.png");
  top: -20px;
  left: -35px;
  background-size: 70px 89px;
  width: 70px;
  height: 89px;

  .qyPoint1_box {
    position: absolute;
    background-image: url("/img/myimg/point/pointText.png");
    background-size: 120px 30px;
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    left: 55px;
    top: 25px;
    color: #c8f5ff;
    font-size: 13px;
  }
}

.Point {
  .Point_box {
    background-image: url("/img/myimg/point/pointText.png");
    background-size: 100px 30px;
    width: 100px;
    height: 30px;
    text-align: left;
    padding-left: 20px;
    line-height: 30px;
    color: #c8f5ff;
    font-size: 13px;
  }
}

.lcPoint {
  position: relative;

  .lcPoint_box {
    position: absolute;
    background-image: url("/img/myimg/point/pointText.png");
    background-size: 130px 25px;
    width: 130px;
    height: 25px;
    top: -20px;
    left: -35px;
    padding-left: 20px;
    text-align: left;
    line-height: 25px;
    color: #c8f5ff;
    font-size: 13px;
  }
}

.ggfwPoint1 {
  background-image: url("/img/myimg/point/qiyePoint.png");
  background-size: 70px 89px;
  width: 70px;
  height: 89px;
}

.ggfwPoint1_box {
  background-image: url("/img/myimg/point/pointText.png");
  background-size: 200px 30px;
  width: 200px;
  height: 30px;
  text-align: left;
  line-height: 30px;
  padding-left: 30px;
  color: #c8f5ff;
  font-size: 13px;
}

.sxtPoint1 {
  position: relative;
  background-image: url("/img/myimg/point/qiyePoint.png");
  background-repeat: no-repeat;
  top: -20px;
  left: -35px;
  background-size: 70px 89px;
  width: 70px;
  height: 89px;

  .sxtPoint1_box {
    position: absolute;
    background-image: url("/img/myimg/point/pointText.png");
    background-size: 120px 30px;
    background-repeat: no-repeat;
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 25px;
    left: 55px;
    top: 25px;
    color: #c8f5ff;
    font-size: 13px;
  }
}

.sjPoint1 {
  background-image: url("/img/myimg/point/sjPoint.png");
  background-size: 70px 89px;
  width: 70px;
  height: 89px;
}

.sjPoint1_box {
  background-image: url("/img/myimg/point/pointText.png");
  background-size: 150px 30px;
  width: 150px;
  height: 30px;
  text-align: center;
  color: #c8f5ff;
  font-size: 13px;
}

.wgyPoint1 {
  width: 50px;
  height: 55px;
  border-radius: 50%;
  margin-right: 10px;
}

.wgyPoint1_box {
  background-image: url("/img/myimg/point/pointText1.png");
  background-size: 130px 52px;
  width: 130px;
  height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // line-height: 30px;
  padding: 5px 0 5px 20px;
  color: #c8f5ff;
  font-size: 13px;
}

.sqgkPoint2 {
  position: relative;
  background-image: url("/img/myimg/point/qiyePoint.png");
  top: -20px;
  left: -35px;
  background-size: 70px 89px;
  width: 70px;
  height: 89px;

  .sqgkPoint2_box {
    position: absolute;
    background-image: url("/img/myimg/point/pointText.png");
    background-size: 120px 30px;
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    left: 55px;
    top: 25px;
    color: #c8f5ff;
    font-size: 13px;
  }
}

.xldPoint1 {
  background-image: url("/img/myimg/point/xunluodianPoint.png");
  background-size: 70px 80px;
  width: 70px;
  height: 80px;
}

.xldPoint1_box {
  padding: 5px 20px;
  min-width: 200px;
  border-width: 1px 4px 1px 4px;
  font-size: 12px;
  border-style: solid;
  border-color: #00c8ff;
  background-color: #06506399;
  color: #c8f5ff;
  font-size: 13px;
}

.wzcbdPoint1 {
  background-image: url("/img/myimg/point/wuzichubeidianPoint.png");
  background-size: 70px 80px;
  width: 70px;
  height: 80px;
  margin-right: 10px;
}

.wzcbdPoint1_box {
  padding: 5px 10px;
  min-width: 200px;
  border-width: 1px 4px 1px 4px;

  border-style: solid;
  border-color: #00c8ff;
  background-color: #06506399;
  color: #c8f5ff;
  font-size: 13px;

  .wzcbdPoint1_box_name {
    font-size: 13px;
  }

  .wzcbdPoint1_box_fzr {
    margin-top: 5px;
    font-size: 10px;
  }
}

.sxtPoint1 {
  position: relative;
  background-image: url("/img/myimg/point/shexiangtouPoint.png");
  top: -19px;
  left: -37px;
  background-size: 70px 80px;
  width: 70px;
  height: 80px;

  .sxtPoint1_box {
    position: absolute;
    padding: 5px 10px;
    min-width: 150px;
    border-width: 1px 4px 1px 4px;
    font-size: 12px;
    border-style: solid;
    border-color: #00c8ff;
    background-color: #06506399;
    left: 60px;
    top: 25px;
    color: #c8f5ff;
    font-size: 13px;
  }
}

.sxtPoint2 {
  background-image: url("/img/myimg/point/sxt_rl.png");
  background-size: 47px 54px;
  width: 47px;
  height: 54px;
}

.sxtPoint2_box {
  padding: 5px 10px;
  min-width: 150px;
  border-width: 1px 4px 1px 4px;
  font-size: 12px;
  border-style: solid;
  border-color: #00c8ff;
  background-color: #06506399;
  color: #c8f5ff;
  font-size: 13px;
}

.sxtPoint3 {
  background-image: url("/img/myimg/point/sxt_sw.png");
  background-size: 47px 54px;
  width: 47px;
  height: 54px;
}

.sxtPoint3_box {
  padding: 5px 10px;
  min-width: 150px;
  border-width: 1px 4px 1px 4px;
  font-size: 12px;
  border-style: solid;
  border-color: #00c8ff;
  background-color: #06506399;
  color: #c8f5ff;
  font-size: 13px;
}

.sxtPoint4 {
  background-image: url("/img/myimg/point/sxt_pw.png");
  background-size: 47px 54px;
  width: 47px;
  height: 54px;
}

.sxtPoint4_box {
  padding: 5px 10px;
  min-width: 150px;
  border-width: 1px 4px 1px 4px;
  font-size: 12px;
  border-style: solid;
  border-color: #00c8ff;
  background-color: #06506399;
  color: #c8f5ff;
  font-size: 13px;
}

.sxtPoint5 {
  background-image: url("/img/myimg/point/sxt_dt.png");
  background-size: 47px 54px;
  width: 47px;
  height: 54px;
}

.sxtPoint5_box {
  padding: 5px 10px;
  min-width: 150px;
  border-width: 1px 4px 1px 4px;
  font-size: 12px;
  border-style: solid;
  border-color: #00c8ff;
  background-color: #06506399;
  color: #c8f5ff;
  font-size: 13px;
}

.sxtPoint6 {
  background-image: url("/img/myimg/point/sxt_shlj.png");
  background-size: 47px 54px;
  width: 47px;
  height: 54px;
}

.sxtPoint6_box {
  padding: 5px 10px;
  min-width: 150px;
  border-width: 1px 4px 1px 4px;
  font-size: 12px;
  border-style: solid;
  border-color: #00c8ff;
  background-color: #06506399;
  color: #c8f5ff;
  font-size: 13px;
}

.sxtPoint7 {
  position: relative;
  background-image: url("/img/myimg/point/sxt_gkpw.png");
  top: -27px;
  left: -23px;
  background-size: 47px 54px;
  width: 47px;
  height: 54px;

  .sxtPoint7_box {
    position: absolute;
    padding: 5px 10px;
    min-width: 150px;
    border-width: 1px 4px 1px 4px;
    font-size: 12px;
    border-style: solid;
    border-color: #00c8ff;
    background-color: #06506399;
    left: 60px;
    top: 5px;
    color: #c8f5ff;
    font-size: 13px;
  }
}

.sxtPoint8 {
  position: relative;
  background-image: url("/img/myimg/point/sxt_znfh.png");
  top: -27px;
  left: -23px;
  background-size: 47px 54px;
  width: 47px;
  height: 54px;

  .sxtPoint8_box {
    position: absolute;
    padding: 5px 10px;
    min-width: 150px;
    border-width: 1px 4px 1px 4px;
    font-size: 12px;
    border-style: solid;
    border-color: #00c8ff;
    background-color: #06506399;
    left: 60px;
    top: 5px;
    color: #c8f5ff;
    font-size: 13px;
  }
}

.zdfxPoint1 {
  background-image: url("/img/myimg/point/zhongdafengxianPoint.png");
  background-size: 100% 100%;
  width: 70px;
  height: 80px;
}

.zdfxPoint1_box {
  padding: 5px 10px;
  width: 160px;
  height: 60px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-width: 1px 4px 1px 4px;
  font-size: 12px;
  border-style: solid;
  border-color: #ff3131;
  background-color: #63060899;
  color: #ffffff;
  font-size: 13px;
}

.jdfxPoint1 {
  background-image: url("/img/myimg/point/jiaodafengxianPoint.png");
  background-size: 70px 80px;
  width: 70px;
  height: 80px;
}

.jdfxPoint1_box {
  padding: 5px 10px;
  width: 160px;
  height: 60px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-width: 1px 4px 1px 4px;
  font-size: 12px;
  border-style: solid;
  border-color: #ffb731;
  background-color: #63440699;
  color: #ffffff;
  font-size: 13px;
}

.ybfxPoint1 {
  background-image: url("/img/myimg/point/yibanfengxianPoint.png");
  background-size: 70px 80px;
  width: 70px;
  height: 80px;
}

.ybfxPoint1_box {
  padding: 5px 10px;
  min-width: 160px;
  min-height: 60px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-width: 1px 4px 1px 4px;
  font-size: 12px;
  border-style: solid;
  border-color: #00c8ff;
  background-color: #06506399;
  color: #ffffff;
  font-size: 13px;
}

.dqfwzxPoint {
  position: relative;

  top: -45px;
  left: -57px;
  background-size: 120px 149px;
  width: 120px;
  height: 149px;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.dqfwzxPoint {
  animation: bounce 1.5s infinite;
}

/**给控件工具按钮栏加边框样式*/
.cesium-button,
.cesium-geocoder-searchButton,
.cesium-viewer-geocoderContainer form .cesium-geocoder-input,
.mars3d-contextmenu-ul,
.mars3d-contextmenu-line {
  border-image: url("https://data.mars3d.cn/img/control/border.svg") 1 round stretch;
}

/* 自定义Popup样式*/
.mars3d-popup-btn-custom {
  padding: 3px 10px;
  border: 1px solid #209ffd;
  background: #209ffd1c;
  color: #ffffff;
}

/* 自定义Popup样式*/
.mars3d-popup-btn-custom {
  padding: 3px 10px;
  border: 1px solid #209ffd;
  background: #209ffd1c;
  color: var(--mars-text-color, #ffffff);
}

.ellipsis2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.custom-popup {
  transform: translate(160px, 100px) !important;
}

#11 {
  width: 0;
  height: 0;
}
</style>
